<template>
  <el-dialog
    :title="title"
    v-model="model"
    width="600px"
    :before-close="closeHandle"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="车位号" prop="parkingNumber">
        <el-input v-model="form.parkingNumber" placeholder="请输入车位号" />
      </el-form-item>
      <el-form-item label="车位类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择车位类型" clearable>
          <!-- 0=产权车位 1=公共车位 2=第三方车位 -->
          <el-option label="产权车位" :value="0" />
          <el-option label="公共车位" :value="1" />
          <el-option label="第三方车位" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="绑定房屋" prop="roomId">
        <el-cascader
          style="width: 100%"
          v-model="form.roomId"
          :props="cascaderProps"
          clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeHandle">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup name="parkingSpaceAddEdit">
import { ref, reactive, computed, onMounted } from "vue";
import memberSelect from "@/components/memberSelect";
import { ElMessage } from "element-plus";
import {
  saveParkingSpace,
  updateParkingSpace,
  getCommunityPage,
  getFloorPage,
  getBuildingRoomPage,
} from "@/api/realEstateManage";
const props = defineProps({
  communityId: {
    type: String,
    default: "",
  },
  row: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits(["submit"]);
const model = defineModel({
  default: false,
});

const formRef = ref();
const form = ref({
  parkingNumber: "",
  type: "",
  roomId: "",
});

const rules = reactive({
  parkingNumber: [{ required: true, message: "请输入车位号" }],
  type: [{ required: true, message: "请选择车位类型" }],
});

const isEdit = computed(() => {
  return !!props.row.id;
});
// 加载小区列表
const getCommunityList = () => {
  return new Promise((resolve, reject) => {
    getCommunityPage({
      pageNo: 1,
      pageSize: 999,
    }).then(({ data }) => {
      const result = data.records.map((item) => ({
        value: item.id,
        label: item.name,
      }));
      resolve(result);
    });
  });
};
// 加载楼栋列表
const getFloorList = (id) => {
  return new Promise((resolve) => {
    getFloorPage({
      pageNo: 1,
      pageSize: 999,
      communityId: id,
    }).then(({ data }) => {
      const result = data.records.map((item) => ({
        value: item.id,
        label: item.name,
      }));
      resolve(result);
    });
  });
};
// 加载房屋列表
const getBuildingRoomList = (id) => {
  return new Promise((resolve) => {
    getBuildingRoomPage({
      pageNo: 1,
      pageSize: 999,
      floorId: id,
    }).then(({ data }) => {
      const result = data.records.map((item) => ({
        value: item.id,
        label: item.roomNum,
      }));
      resolve(result);
    });
  });
};

const cascaderProps = {
  emitPath: false,
  lazy: true,
  lazyLoad: async (node, resolve) => {
    const { level, value } = node;
    console.log("[ level ] >", level);
    const map = {
      0: getCommunityList,
      1: getFloorList,
      2: getBuildingRoomList,
    };
    const list = await map[level](value);
    console.log("[ list ] >", list);
    const nodes = list.map((item) => ({
      value: item.value,
      label: item.label,
      leaf: level >= 2,
    }));
    resolve(nodes);
  },
};

onMounted(() => {
  if (isEdit.value) {
    form.value = props.row;
  }
});

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const params = { ...form.value, communityId: props.communityId };
      console.log("[ params ] >", params);
      if (isEdit.value) {
        params.id = props.row.id;
      }
      const api = isEdit.value ? updateParkingSpace : saveParkingSpace;
      api(params).then(() => {
        ElMessage({
          message: isEdit.value ? "编辑成功" : "添加成功",
          type: "success",
        });
        closeHandle();
        emit("submit", form.value);
      });
    }
  });
};

const closeHandle = () => {
  model.value = false;
};
</script>

<style scoped>
.el-input-number,
.el-cascader {
  width: 100%;
}
</style>
